<template>
    <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<br/><br/>
 <el-card class="box-card">
    <el-button type='primary' style='float:left' @click='isshow=!isshow'>添加角色</el-button>
    <el-table
    :data="roles"
    border
    style="width: 100%">
    <el-table-column
      type='index'
      width="150">
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="roleDesc"
      label="描述"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="primary" @click='edit(scope.row.id,scope.$index)' icon="el-icon-edit">编辑</el-button>
        <el-button type="danger" @click='del(scope.row.id)' icon="el-icon-delete">删除</el-button>
        <el-button type="warning" icon="el-icon-setting">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>

<el-dialog title="新增角色" :visible.sync="isshow">
  <el-form :model="form" ref="addRoles">
    <el-form-item label="角色名称">
      <el-input v-model="form.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述">
      <el-input v-model="form.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click='addRoles'>确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="修改角色" :visible.sync="editshow">
  <el-form :model="editform" ref="editRoles">
    <el-form-item label="角色名称">
      <el-input v-model="editform.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述">
      <el-input v-model="editform.roleDesc"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editshow = false">取 消</el-button>
    <el-button type="primary"  @click='editRoles'>确 定</el-button>
  </div>
</el-dialog>


</el-card>
    </div>
</template>

<script>
import { getRoles, addRoles, delRoles, editRoles } from "../api/api.js";
export default {
  data() {
    return {
      roles: [],
      isshow: false,
      editshow:false,
      edit_id:0,
      form: {
        roleName: "",
        roleDesc:''
      },
      editform: {
        roleName: "",
        roleDesc:''
      }
    
    };
  },
  mounted() {
    this.getRoles();
  },
  methods: {
    async getRoles() {
      let res = await getRoles(this.form);
      console.log(res);
      this.roles = res.data
    },
    edit(id,index){
       this.editshow=!this.editshow
       this.editform={
         roleName:this.roles[index].roleName,
         roleDesc:this.roles[index].roleDesc
       }
       this.edit_id=id
    },
    editRoles(){
       this.$refs['editRoles'].validate(async (valid) => {
          if (valid) {
            let res=await editRoles(this.edit_id,this.editform)
            console.log(res)
            if(res.meta.status==200){
              this.$message.success(res.meta.msg)
              this.editshow=false
              this.getRoles();
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
    },
    addRoles(){
        this.$refs['addRoles'].validate(async (valid) => {
          if (valid) {
            let res=await addRoles(this.form)
            console.log(res)
            if(res.meta.status==201){
                this.$message.success(res.meta.msg)
                this.isshow=false
                this.getRoles()
            }
            this.form={
              roleName:'',
              roleDesc:''
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    del(id){
       this.$confirm('确定要删除吗').then(async () => {
          let res=await delRoles(id)
          if(res.meta.status==200){
              this.$message.success(res.meta.msg)
          }
          this.getRoles()
        })
      }
  }
};
</script>

<style lang='scss' scoped >
</style>
